main {
  width: 1240px;
  background-color: #f5f5f5;
  margin: 0 auto;
  padding: 20px 0 0;

  // 左侧导航
  .nav {
    float: left;
    width: 220px;
    background-color: #ffffff;

    .box {
      height: 51.19px;
      padding: 20px 52px 5px;
      font-size: 18px;
      // text-align: center;
    }

    div {
      a {
        font-size: 14px;
        display: block;
        height: 44px;
        // background-color: blue;
        padding: 15px 0;
        margin: 0 52px 10px;
      }

      .ture {
        color: green;
        
        // position: absolute;
        // width: 4px;
        // height: 4px;
        // border-radius: 100%;
        // background: red;
        // box-shadow: 02px 4px rgba(0,0,0,2);
      }

      :hover {
        color: green;
      }
    }
  }

  // 右侧个人信息
  .personal {
    float: right;
    width: 1000px;
    height: 132px;
    background: url(http://megasu.gitee.io/rabbit-vue3-ts/assets/center-bg.6d53130c.png) no-repeat;

    // 一、个人信息
    .profile {
      display: flex;
      flex-direction: row;

      /* 横向排列 */
      // 1、个人信息
      .personal {
        width: 50%;
        // background-color: red;
        display: flex;
        align-items: center;

        .picture {
          padding-left: 40px;

          img {
            width: 85px;
            height: 85px;
          }
        }

        h1 {
          font-size: 18px;
          padding-left: 26px;
          color: white;
        }
      }

      // 2、设置
      .emplace {
        width: 50%;
        // background-color: black;
        display: flex;
        justify-content: space-around;
        align-items: center;

        a {
          width: 64px;
          height: 76.8px;
          color: white;
          // background-color: #fff;
          display: flex;
          flex-direction: column;

          i {
            font-size: 32px;
            margin: 10px auto;
          }

          span {
            font-size: 16px;

          }

          :hover {
            color: green;
          }
        }
      }


    }

    // 二、我的收藏
    .collection {
      height: 400px;
      background-color: #ffffff;
      margin: 20px 0 0;
      padding: 0 20px;

      // 1、顶部信息
      .header {
        width: 960px;
        height: 66px;
        font-weight: 400;
        border-bottom: 1px solid #f5f5f5;

        div {
          float: left;
          line-height: 60px;
          text-align: center;

          span {
            font-size: 22px;
          }
        }

        a {
          float: right;
          line-height: 66px;
          text-align: center;
          color: #999999;

          span {
            font-size: 16px;
            // color: #999999;
          }

          i {
            font-size: 14px;
          }
        }
      }

      // 2、内容部分
      // .content{
      // }
    }

    // 三、我的足迹
    .footmark {
      height: 400px;
      background-color: #ffffff;
      margin: 20px 0 0;
      padding: 0 20px;

      // 1、顶部信息
      .header {
        width: 960px;
        height: 66px;
        border-bottom: 1px solid #f5f5f5;

        div {
          float: left;
          line-height: 60px;
          text-align: center;

          span {
            font-size: 22px;
          }
        }

        a {
          float: right;
          line-height: 66px;
          text-align: center;
          color: #999999;

          span {
            font-size: 16px;
          }

          i {
            font-size: 14px;
          }
        }
      }

      // 2、内容部分
      // .content{
      // }
    }

  }
}